<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员信息表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<style>
    .tb{
        text-align: center;
    }
    #list{
        text-align: center;
    }
    #gh{
        margin-right: -8px;
        margin-left: -15px;
    }
    .tb{
        margin-top: 50px;
    }
    #n:hover{
        border: 1px solid #73c9ee;
    }
    #s:hover{
        border: 1px solid #73c9ee;
    }
    #a:hover{
        border: 1px solid #73c9ee;
    }
    #btn:hover{
        border: 1px solid #73c9ee;
    }
    #n{
        width: 186px;
        border-radius: 7px;
         background: #fff;
    }
    #s{
        width: 186px;
        border-radius: 7px;
        height: 31px;
         background: #fff;
    }
    #a{
        width: 186px;
        border-radius: 7px;
        background: #fff;
    }
    #btn{
        width: 186px;
        border-radius: 7px;
        background: #fff;
    }
</style>
<body>




<h2 style="text-align: center;height: 150px;background: #eeeeee">添加学员信息</h2>
<div class="container" style="text-align: center;">
    <input type="text" id="n" placeholder="姓名">
    <select id="s">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <input type="number" id="a" placeholder="年龄">
    <button id="btn">添加</button>


</div>




<div class="tb">
    <div class="container">
        <div class="row">
            <div class="col-md-4">姓名</div>
            <div class="col-md-4" id="gh">性别</div>
            <div class="col-md-4">年龄</div>
        </div>
    </div>
</div>

<div class="nr">
<div class="container">
    <div class="row" id="list">

    </div>
</div>
</div>




<script>
    function loadXMLDoc() {
        var xmlhttp;
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var json = JSON.parse(xmlhttp.responseText);
                for(var i = 0 ;i <json.data.length ; i++){
                    /*获取12*/
                    var div12 = document.createElement("div");
                    div12.className = "col-12 row";
                    var span1 = document.createElement("span");
                    span1.innerHTML = json.data[i].studentName;
                    span1.className = "col-4";
                    var span2 = document.createElement("span");
                    span2.innerHTML = json.data[i].sex;
                    span2.className = "col-4";
                    var span3 = document.createElement("span");
                    span3.innerHTML = json.data[i].age;
                    span3.className = "col-4";
                    div12.appendChild(span1);
                    div12.appendChild(span2);
                    div12.appendChild(span3);
                    document.querySelector("#list").appendChild(div12);
                }
            }
        };
        xmlhttp.open("GET","http://localhost/ajaxAPI/ajaxApi/public/index.php/index/student/student",true);
        xmlhttp.send();
    }
    loadXMLDoc();

    document.querySelector("#btn").addEventListener("click",function(){
        var n = document.querySelector("#n").value;
        var s = document.querySelector("#s").value;
        var a = document.querySelector("#a").value;
        if (n != "" || a != ""){
        var b;
        b=new XMLHttpRequest();
        b.onreadystatechange=function() {
            if (b.readyState==4 && b.status==200) {
                document.querySelector("#list").innerHTML = "";
                loadXMLDoc();
            }
        };
        b.open("GET","http://localhost/ajaxAPI/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
        b.send();
        }else {
            alert('不可以为空')
        }


    });

</script>
</body>
</html>